<template>
  <div class="login">
    <div class="left-wrap" :style="{backgroundImage: `url(${leftBg})`}">
      <div class="logo">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconzhaopian-copy"></use>
        </svg>
        <h1 class="title">{{sysName}}</h1>
      </div>

<!--      <img class="left-img" src="@/assets/images/bg/lf_icon.svg"/>-->
    </div>
    <div class="right-wrap">
      <div class="header">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconzhaopian-copy"></use>
        </svg>
        <h1>{{sysName}}</h1>
      </div>
      <div class="login-wrap">
        <div class="form">
          <h3>登录</h3>
          <el-col style="margin-top: 30px">
            <span class="input-label">账号</span>
            <el-input size="medium" v-model.trim="loginUser"/>
          </el-col>
          <el-col style="margin-top: 15px">
            <span class="input-label">密码</span>
            <el-input size="medium" v-model.trim="password" type="password"
                      autocomplete="off"
                      @keyup.enter.native="loginPc"
            />
          </el-col>
          <!--<el-col style="margin-top: 15px" >-->
          <!--  <span class="input-label">验证码</span>-->
          <!--  <el-col class="code">-->
          <!--    <el-input size="medium" v-model.trim="code" @keyup.enter.native="loginPc"/>-->
          <!--    <img :src="captchaImg" @click="getVerificationCode()" alt="验证码不见了" />-->
          <!--  </el-col>-->
          <!--</el-col>-->
          <el-col style="margin-top: 30px">
            <el-button class="login-btn" @click="loginPc" >
              登录
            </el-button>
          </el-col>
          <el-col style="margin-top: 30px">
            <el-button class="register-btn" @click="toRegister" type="success">
              注册
            </el-button>
          </el-col>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import setting from '@/config/setting';
  import http from '@/utils/http';
  import {desEncrypt} from "../../utils/utils";

  export default {
    name: "Index",
    data() {
      return {
        // 左边的图片
        // leftBg: require('@/assets/images/bg/lf_bg.png'),
        // 系统名称
        sysName: setting.sysName,
        // 用户名
        loginUser: '',
        // 密码
        password: '',
        // 用户输入的验证码
        code: '',
        // 返回的验证码图片
        captchaImg: '',
        // 用户的唯一标识，用于区分验证码是谁的
        onlyId: null,
        // 登录的加密key，用于解密账号密码
        loginPasswordKey: '',
        // 跳的注册页面
        toRegisterPath: '/register2',
      }
    },
    methods: {
      /**
       * 跳转到注册页面
       */
      toRegister(){
        this.$router.push({path: this.toRegisterPath})
      },
      /**
       * 登录PC端
       */
      loginPc() {
        // 加密key需要后端提供
        let encryptUser = desEncrypt(this.loginUser, this.loginPasswordKey);
        let encryptPassword = desEncrypt(this.password, this.loginPasswordKey);

        http.post("/open/loginPc", {
          // 请求参数
          loginUser: encryptUser,
          password: encryptPassword,
          code: this.code,
          onlyId: this.onlyId

        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              // 重新刷新验证码
              // this.getVerificationCode();
              this.$message.error(res.msg);
            }
            return
          }

          // 登录完成
          let localStorage = window.localStorage;
          localStorage.token = res.data.tokenValue;
          localStorage.memberFamily = JSON.stringify(res.data.memberFamily);

          this.$router.push({path: "/home"})

        }).catch(error => {
          // 重新刷新验证码
          // this.getVerificationCode();
          this.$message.error(error.message);
        })
      },
      /**
       * 获取验证码
       */
      getVerificationCode(){
        http.get("/qcc/open/getVerificationCode").then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.captchaImg = res.data.images;
          // 加密的key
          this.loginPasswordKey = res.data.loginPasswordKey;
          this.onlyId = res.data.keyId;

          //存放加密key
          let localStorage = window.localStorage;
          localStorage.loginPasswordKey = this.loginPasswordKey;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取用户加密解密的key
       */
      getKey(){
        http.post("/open/getKey", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 加密的key
          this.loginPasswordKey = res.data;

          // 存放加密key
          let localStorage = window.localStorage;
          localStorage.loginPasswordKey = this.loginPasswordKey;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取注册页跳往哪一个
       */
      getRegisterPage(){
        http.get("/open/getRegisterPage", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data.value === '1'){
            this.toRegisterPath = '/register'
          } else {
            this.toRegisterPath = '/register2'
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted (){
      this.getKey();
      this.getRegisterPage()
    }
  }
</script>

<style scoped>

  .login {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
  }
  .login .icon {
    width: 32px;
    height: 32px;
  }
  /deep/ .login .el-input__inner:focus {
    border: 1px solid #4E83FD;
  }
  /deep/ .login .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
  }
  .login .left-wrap {
    width: 520px;
    height: 100%;
    background: #fff;
    background-size: cover;
    padding: 20px;
    box-sizing: border-box;
  }
  .login .left-wrap .logo {
    display: flex;
    align-items: center;
  }
  .login .left-wrap .logo .title {
    color: #555;
    font-size: 20px;
    font-weight: 500;
    margin-left: 5px;
  }
  .login .left-wrap .left-img {
    display: block;
    margin: auto;
    margin-top: 300px;
  }
  .login .right-wrap {
    width: calc(100% - 520px);
    height: 100%;
    position: relative;
  }
  .login .right-wrap .header {
    display: none;
  }
  .login .right-wrap .login-wrap {
    width: 440px;
    height: 550px;
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-size: cover;
    box-shadow: 0 0 10px rgba(28, 76, 186, 0.1);
  }
  .login .right-wrap .login-wrap .form {
    widows: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px 30px;
    background: #fff;
  }
  .login .right-wrap .login-wrap .form h3 {
    color: #555;
    font-size: 23px;
    text-align: center;
    font-weight: 500;
  }
  .login .right-wrap .login-wrap .form .input-label {
    color: #333;
    font-size: 14px;
    padding: 8px 0;
    display: block;
  }
  .login .right-wrap .login-wrap .form .code {
    display: flex;
    justify-content: space-between;
  }
  .login .right-wrap .login-wrap .form .code .el-input {
    flex: 1;
    margin-right: 20px;
  }
  .login .right-wrap .login-wrap .form .code img {
    width: 115px;
    height: 40px;
    cursor: pointer;
    border-radius: 5px;
    background: #f8f8f8 !important;
  }

  /*登录按钮颜色*/
  .login .right-wrap .login-wrap .form .login-btn {
    width: 100%;
    height: 40px;
    border: 0;
    color: #fff;
    background: #4E83FD;
  }

  /*注册按钮样式*/
  .login .right-wrap .login-wrap .form .register-btn {
    width: 100%;
    height: 40px;
    border: 0;
    color: #fff;
    background: #67c23a;
  }

</style>
